<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dojo, javascript, integration, calendar, date, input, fubar_perl" />
<meta name="description" content="Popup div calendar using a simple javascript program and Dojo integration!" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="distribution" content="Global" />
<meta name="author" content="Dwight Vietzke" />
<meta http-equiv="Reply-to" content="dwight_vietzke@yahoo.com" />
<meta name="classification" content="mobile internet website software" />
<meta name="copyright" content="Copyright©2008-2009 - OpenSiteMobile" />

	<title>Calendar Test Page</title>

<script type="text/javascript" charset='utf-8' src="./msos/dojo_config.js"></script>
<script type="text/javascript" charset='utf-8' src="./dojo/dojo.js"></script>

<script type='text/javascript'>
/* <![CDATA[ */

dojo.require("msos.common");
dojo.require("msos.calendar");
dojo.require("msos.calendar_config");

function init_calendar() {

    // Test browser basics
    if (!msos.common.browser_current())  return false;

    // Our calendar popup related elements...
    var cal_input_el	= dojo.byId("calendar_input");
    var cal_window_el	= dojo.byId("calendar_window");

    // Get/set configuration object
    var cal_cfg_obj = new msos.calendar_config.create();

    // This section is useful for testing and demo purposes.
    var config_ul = dojo.byId('configuration');
    for (var parm in djConfig) {
	if (typeof(djConfig[parm]) == 'boolean') {
	    var list_elm   = document.createElement("li");
	    var inpt_elm_t = document.createElement("input");
	    var inpt_elm_f = document.createElement("input");
	    inpt_elm_t.type = "radio";
	    inpt_elm_f.type = "radio";
	    inpt_elm_t.name = parm;
	    inpt_elm_f.name = parm;
	    inpt_elm_t.value = 'true';
	    inpt_elm_f.value = 'false';
	    if (djConfig[parm]) inpt_elm_t.checked = true;
	    else		inpt_elm_f.checked = true;
	    var true_txt = document.createTextNode('T ');
	    var list_txt = document.createTextNode('F ' + parm); 
	    list_elm.appendChild(inpt_elm_t);
	    list_elm.appendChild(true_txt);
	    list_elm.appendChild(inpt_elm_f);
	    list_elm.appendChild(list_txt);
	    config_ul.appendChild(list_elm);
	}
    }
    for (var item in cal_cfg_obj) {
	if (typeof(cal_cfg_obj[item]) == 'boolean') {
	    var list_elm   = document.createElement("li");
	    var inpt_elm_t = document.createElement("input");
	    var inpt_elm_f = document.createElement("input");
	    inpt_elm_t.type = "radio";
	    inpt_elm_f.type = "radio";
	    inpt_elm_t.name = item;
	    inpt_elm_f.name = item;
	    inpt_elm_t.value = 'true';
	    inpt_elm_f.value = 'false';
	    if (typeof(djConfig.msos_query[item]) == 'boolean') {
		cal_cfg_obj[item] = djConfig.msos_query[item];
	    }
	    if (cal_cfg_obj[item]) inpt_elm_t.checked = true;
	    else		   inpt_elm_f.checked = true;
	    var true_txt = document.createTextNode('T ');
	    var list_txt = document.createTextNode('F ' + item); 
	    list_elm.appendChild(inpt_elm_t);
	    list_elm.appendChild(true_txt);
	    list_elm.appendChild(inpt_elm_f);
	    list_elm.appendChild(list_txt);
	    config_ul.appendChild(list_elm);
	}
    }

    // Set current language in menu (testing and demo purposes)
    msos.common.set_select_menu(dojo.byId('select_language'),  djConfig.locale);

    // Generate our popup calendar object(s)...
    var calendar_object = new msos.calendar.generate_tool(cal_input_el, cal_window_el, cal_cfg_obj);

    // Configure our calendar start button(s)...
    var button_config = {
	img_name :		'calendar.gif',
	img_url :		djConfig.msos_folder + '/images/',
	img_title :		calendar_object.cal_lang.button_title,
	img_alt :		calendar_object.cal_lang.button_alt,
	img_size :		'img_reg',
	img_but_id :		'calendar',
	button_mouseup :	calendar_object.cal_button_onmouseup
    }

    // Generate our calendar start button(s)...
    var cal_button = new msos.common.generate_img_button(cal_input_el.parentNode);

    // And generate the button(s)...
    for (var val in button_config) { cal_button[val] = button_config[val]; }
    cal_button.img_button_append();
}

// Start our calendar(s)...
dojo.addOnLoad(init_calendar);

/* ]]> */
</script>

<link rel='stylesheet' type='text/css' charset='utf-8' href="./msos/style/fubar.css" media='screen, handheld' />
<link rel="stylesheet" type='text/css' charset='utf-8' href="./msos/style/calendar.css" media='screen, handheld' />
<link rel='shortcut icon' href='./msos/images/osm.ico' />

<style type="text/css">
/* <![CDATA[ */

ul#language option {
    width:20px;
    text-align:center;
}

/* ]]> */
</style>

</head>
<body>

<div id='body'>

<div class='marquee'>
    <img id='osm_logo_small' src='./msos/images/osm_logo_sml.jpg' class='marquee_img' alt="OpenSiteMobile" />
</div>

<div class='header'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<h1>Javascript Calendar</h1>

<form id='dumby' accept-charset='utf-8' action='' onsubmit="return false;">

<div class='contrast1'><input type="text" id="calendar_input" /> </div>
<div id="calendar_window"></div>

<div class='space'> </div>

<h3>
        <a href="javascript:history.go(-1);"> Back </a> -

        <img style="width:10px; height:10px; background:#FF33FF;" alt="color is #FF33FF" title="#FF33FF" src="./msos/images/shim.gif" /> -

        <select name='test_select'>
                <option>red</option>
                <option>green</option>
                <option>blue</option>
        </select> -

        <input type="button" value="test" />
</h3>

<div class='space'> </div>

</form>

<div class='pgrph_sml'>
  The above link, select, button and image elements are used to make sure the calendar correctly appears 'over'
  these elements when used.
</div>

<div class='pgrph_sml'>Some web browsers (such as IE) have had problems with javascript displayed
  'div' sections not appearing over certain 'html' elements correctly.
</div>

<div class='pgrph_sml'>
    Please see the current configuration in <a href='./msos/calendar_config.js'>calendar_config</a>
    for settings related to future and past dates available, date formats and other calendar display options.
</div>

<h3>Config. Testing</h3>

<form accept-charset='utf-8' action='calendar.html' method='get'>
<div class='list_large'>

<ul id='language'>
<li><select id='select_language' name='locale'>
    <option value='ar'> ar </option>
    <option value='ca'> ca </option>
    <option value='cs'> cs </option>
    <option value='da'> da </option>
    <option value='de'> de </option>
    <option value='el'> el </option>
    <option value='en'> en </option>
    <option value='es'> es </option>
    <option value='fi'> fi </option>
    <option value='fr'> fr </option>
    <option value='he'> he </option>
    <option value='hu'> hu </option>
    <option value='it'> it </option>
    <option value='ja'> ja </option>
    <option value='ko'> ko </option>
    <option value='nb'> nb </option>
    <option value='nl'> nl </option>
    <option value='pl'> pl </option>
    <option value='pt'> pt </option>
    <option value='ru'> ru </option>
    <option value='sk'> sk </option>
    <option value='sl'> sl </option>
    <option value='sv'> sv </option>
    <option value='th'> th </option>
    <option value='tr'> tr </option>
    <option value='zh'> zh </option>
</select> Language</li>
</ul>

<ul id='configuration'><li>Not Available</li></ul>

<input type="submit" value="Reset Config." />

</div>
</form>

<div class='space'> </div>

<h3>Reference:</h3>

<div class='list_small'>
<ul>
    <li><a href='./msos/common.js'>msos.common</a></li>
    <li><a href='./msos/calendar.js'>msos.calendar</a></li>
    <li><a href='./msos/calendar_config.js'>msos.calendar_config</a></li>
</ul>
</div>

<h3 title='Rate our script at HotScript!'> OSM Calendar [<a href="http://www.hotscripts.com/rate/88582.html" title='Rate our program'>rate</a>]</h3>

<div class='footer'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<div id='copyright'>
<span class='no_br'>Powered by:
   <a href='http://www.opensitemobile.com'>
  <span class='bold_text' title="Copyright©2008-2009 OpenSiteMobile - All rights reserved">MobileSiteOS</span></a>™</span>
</div>

</div> <!-- end 'body' div -->

</body>
</html>
